<template>
	<view class="content" :style="{ top: menuButtonInfo.top + menuButtonInfo.height + 'px' }">
		<view class="container">
			<!-- <uni-notice-bar showGetMore moreText="前往查看" show-icon scrollable :text="text" @getmore="toPolicing" /> -->
		</view>
		<!-- 轮播图 -->
		<!-- <u-swiper :list="list2" keyName="image" showTitle :autoplay="false" circular></u-swiper> -->
		<!-- 		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot> -->
		<!-- <image class="logo" src="@/static/logo.png"></image> -->
		<view class="text-area">
			<text class="title">欢迎进入设备运维平台</text>
		</view>
		<!-- <van-button type="primary">主要按钮</van-button> -->
		<uni-section title="工单类型数量" type="line">
			<view class="charts-box">
				<qiun-data-charts type="rose" :opts="opts" :chartData="chartData" />
			</view>
		</uni-section>

		<liu-drag-button @clickBtn="submitOrder">报单</liu-drag-button>
		<!-- <button @click="submitOrder">快速报单</button> -->
	</view>
</template>

<script>
import { getOrderNum } from '@/api/system/user.js';
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
export default {
	data() {
		return {
			menuButtonInfo: menuButtonInfo, //右侧胶囊详细信息
			text: '支持在移动端查看所有实时推送的报警信息，并可点击确认及查看当前报警详情。',
			current: 0,
			list2: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['rose'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: 'left',
					lineHeight: 25
				},
				extra: {
					rose: {
						type: 'area',
						minRadius: 50,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 2,
						borderColor: '#FFFFFF'
					}
				}
			}
		};
	},
	onReady() {
		this.getServerData();
	},
	onLoad() {
		// console.log('menuButtonInfo：', this.menuButtonInfo);
	},
	methods: {
		toPolicing() {
			this.$tab.navigateTo('/pages/work/NowAlarm/index');
		},
		submitOrder() {
			this.$tab.navigateTo('/pages/work/SubOrder');
		},
		async getServerData() {
			var orderNum = '';
			await getOrderNum().then((res) => {
				// console.log(res);
				orderNum = res.data.commandStats;
			});

			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				series: [
					{
						data: orderNum
					}
				]
			};
			res.series[0].data.map((item) => {
				item.value = item.value * 1;
			});

			this.chartData = JSON.parse(JSON.stringify(res));
		}
	}
};
</script>

<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}
.swiper {
	height: 300rpx;
}

.swiper-box {
	height: 150px;
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	height: 300rpx;
	line-height: 300rpx;
}

@media screen and (min-width: 500px) {
	.uni-swiper-dot-box {
		width: 400px;
		/* #ifndef APP-NVUE */
		margin: 0 auto;
		/* #endif */
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
}
.content {
	position: relative;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
.container {
	/* #ifndef APP-NVUE */
	width: 100%;
	// height: 100rpx;
	/* #endif */
}
.charts-box {
	width: 100%;
	height: 300px;
}
</style>
